@page "/scheduler/multi-drag"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This demo showcases how the multiple selected events are dragging in same time.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, the <code>AllowMutiDrag</code> property is set as <code>true</code> to drag the multiple selected events. We can select the multiple events by clicking the ctrl key.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.ResourceData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView" AllowMultiDrag="true">
            <ScheduleViews>
                <ScheduleView Option="View.Month"></ScheduleView>
                <ScheduleView Option="View.TimelineMonth"></ScheduleView>
            </ScheduleViews>
            <ScheduleGroup Resources="@GroupData"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@ResourceDatas" Field="TaskId" Title="Owners" Name="Owners" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
            </ScheduleResources>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>

@code{ 
    private View CurrentView = View.Month;
    private DateTime CurrentDate = new DateTime(2020, 1, 8);
    private List<ScheduleData.ResourceData> DataSource = new ScheduleData().GetResourceData();
    private string[] GroupData = new string[] { "Owners" };
    private List<ResourceData> ResourceDatas { get; set; } = new List<ResourceData> {
        new ResourceData { Text = "Nancy", Id= 1, Color = "#df5286" },
        new ResourceData { Text = "Steven", Id= 2, Color = "#7fa900" },
        new ResourceData { Text = "Robert", Id= 3, Color = "#ea7a57" },
        new ResourceData { Text = "Smith", Id= 4, Color = "#5978ee" },
        new ResourceData { Text = "Michael", Id= 5, Color = "#df5286" }
    };
    public class ResourceData
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public string Color { get; set; }
    }
}
